<template>
  <div>
    <div class="number">{{ number }}</div>
    <div class="add" @click="clickAdd">add</div>
    <div class="sub" @click="clickSub">sub</div>
  </div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "Count",
  computed: {
    ...mapState({
      number: (state) => state.number,
    }),
  },
  methods: {
    clickAdd() {
      this.$store.commit("ADD_COUNT");
    },
    clickSub() {
      this.$store.commit("SUB_COUNT");
    },
  },
};
</script>
